<template>
    <div style="height: 100%; width: 100%; position: relative" ref="maindev">
        <div class="pagetop">
            <!-- height 32px 13 67%-->
            <table style="width: 100%; font-size: 12px" border="0">
                <col style="width: 5%" />
                <col style="width: 6%" />
                <col style="width: 2%" />
                <col style="width: 6%" />
                <col style="width: 5%" />
                <col style="width: 10%" />
                <col style="width: 5%" />
                <col style="width: 14%" />
                <col style="width: 5%" />
                <col style="width: 32%" />

                <tr>
                    <td>上报日期</td>
                    <td>
                        <el-date-picker v-model="sel_startdt" :able="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" :clearable="false" :key="startkey"> </el-date-picker>
                    </td>
                    <td style="text-align: center">至</td>
                    <td>
                        <el-date-picker v-model="sel_enddt" type="date" :able="false" placeholder="选择日期" value-format="yyyy-MM-dd" :clearable="false" :key="endkey"> </el-date-picker>
                    </td>
                    <td>医院/院区</td>
                    <td>
                        <rm-ddl-common datatype="hospital" v-model="hospcode" dataname="医院/院区" :appendtobody="true" :disabled="isSelect" @change="hospChange"></rm-ddl-common>
                    </td>
                    <td>病历号</td>
                    <td>
                        <el-input size="small" style="width: 100%" v-model="patno" placeholder="病历号" @focus="Focus($event)"></el-input>
                    </td>
                    <td>送检医院</td>
                    <td><rm-ddl-common datatype="hospital" v-model="shospcode" dataname="医院/院区" :appendtobody="true" :disabled="isSelect" @change="shospChange"></rm-ddl-common></td>
                </tr>
                <tr>
                    <td>姓名</td>
                    <td>
                        <el-input size="small" style="width: 100%" v-model="patname" placeholder="姓名" @focus="Focus($event)"></el-input>
                    </td>
                    <td>科室</td>
                    <td>
                        <rm-ddl-common datatype="dept" dataname="科室" v-model="deptno" width="100%" @change="deptChange"></rm-ddl-common>
                    </td>
                    <td>病区</td>
                    <td>
                        <rm-ddl-common :appendtobody="true" datatype="ward" dataname="病区" v-model="wardno" @change="wardChange"></rm-ddl-common>
                    </td>
                    <td>规则类别</td>
                    <td>
                        <el-select v-model="ruleclass" placeholder="请选择" style="width: 100%">
                            <el-option v-for="item in ruleclassOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </td>
                    <td>检验组</td>
                    <td>
                        <rm-ddl-common :appendtobody="true" @change="labgroupchange" datatype="labgroup" dataname="检验工作组" v-model="labgroupval"></rm-ddl-common>
                    </td>
                </tr>
                <tr>
                    <td colspan="12">
                        <el-button icon="el-icon-search" v-has="'PINQUERY'" type="primary" @click="btnQuery">查询</el-button>
                        <el-button icon="el-icon-delete" @click="btnClear">清除</el-button>
                        <el-button icon="el-icon-upload2" @click.native="btnExport">导出</el-button>
                        <el-button icon="el-icon-upload2" @click.native="btnDetailExport">明细导出</el-button>
                    </td>
                </tr>
            </table>
        </div>
        <div class="pagecenter">
            <rm-layout-right splitcolor="#ffffff" :splitwidth="2" :fixsize="400" :minfixsize="200" ref="layoutright">
                <vxe-table ref="mainTable" :data.sync="mainData" :loading="main_Loading" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" border :height="mainheight" highlight-current-row highlight-hover-column highlight-hover-row how-header-overflow resizable show-overflow size="mini" show-header-overflow :optimization="{ animat: false }" @current-change="mainchange_Event" header-align="center">
                    <vxe-table-column type="index" title="NO." width="40" header-align="center" align="center"></vxe-table-column>
                    <vxe-table-column field="rulename" title="违反的规则" header-align="center" width="125" sortable></vxe-table-column>
                    <vxe-table-column field="ruleclassname" title="规则类别" header-align="center" width="70" sortable></vxe-table-column>
                    <vxe-table-column field="hospitalname" title="医院" width="160" show-overflow :formatter="format"></vxe-table-column>
                    <vxe-table-column field="pat_no" title="病历号" width="75" sortable></vxe-table-column>
                    <vxe-table-column field="pat_cardno" title="病人卡号" width="80" show-overflow></vxe-table-column>
                    <vxe-table-column field="pat_name" title="姓名" width="60" show-overflow></vxe-table-column>
                    <vxe-table-column field="pat_sex" title="性别" width="60" show-overflow :formatter="format"></vxe-table-column>
                    <vxe-table-column field="pat_agestr" title="年龄" width="60" show-overflow></vxe-table-column>
                    <vxe-table-column field="pat_idcardno" title="病人身份证号" width="140" show-overflow></vxe-table-column>
                    <vxe-table-column field="describe" title="规则提示说明" width="135" show-overflow></vxe-table-column>
                    <vxe-table-column field="deptname" title="科室" width="95" show-overflow></vxe-table-column>
                    <vxe-table-column field="wardname" title="病区" width="60" show-overflow></vxe-table-column>
                    <vxe-table-column field="shospitalname" title="送检医院" width="160" show-overflow :formatter="format"></vxe-table-column>
                    <vxe-table-column field="create_user" title="上报人" width="60" header-align="center" align="center" show-overflow></vxe-table-column>
                    <vxe-table-column field="create_dt" title="上报时间" width="125" header-align="center" align="center" sortable></vxe-table-column>
                    <vxe-table-column field="create_note" title="上报备注" width="100" show-overflow></vxe-table-column>
                    <vxe-table-column field="isvalid" title="有效标志" width="60" show-overflow :formatter="format"></vxe-table-column>
                    <vxe-table-column field="hischeckman" title="临床确认人" width="80" header-align="center" align="center" show-overflow></vxe-table-column>
                    <vxe-table-column field="hischeckdt" title="临床确认时间" width="125" header-align="center" align="center" sortable></vxe-table-column>
                    <vxe-table-column field="hischeckinfo" title="临床确认备注" width="100" show-overflow></vxe-table-column>
                    <vxe-table-column field="reportid" title="报告ID" width="120" sortable></vxe-table-column>
                    <vxe-table-column field="multiitemid" title="判定记录ID" width="70" header-align="center" align="right" show-overflow></vxe-table-column>
                    <vxe-table-column field="last_result" title="检查结果" width="100" header-align="center" align="right" show-overflow></vxe-table-column>
                </vxe-table>
                <template v-slot:fix>
                    <div class="right-inser">
                        <vxe-table ref="detailTable" :data.sync="detailData" :loading="detail_Loading" header-align="center" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" border height="100%" highlight-current-row highlight-hover-column highlight-hover-row how-header-overflow resizable show-overflow size="mini" stripe show-header-overflow :optimization="{ animat: false }">
                            <vxe-table-column type="index" title="NO." width="40" header-align="center" align="center"></vxe-table-column>
                            <vxe-table-column field="rpt_itemcode" title="项目代码" width="80" show-overflow></vxe-table-column>
                            <vxe-table-column field="rpt_itemname" title="项目名称" width="120" show-overflow></vxe-table-column>
                            <vxe-table-column field="result_unit" title="项目单位" width="80" show-overflow></vxe-table-column>
                            <vxe-table-column field="result_str" title="文字结果" header-align="center" align="right" width="70" show-overflow></vxe-table-column>
                            <vxe-table-column field="result_num" title="数值结果" header-align="center" align="right" width="70" show-overflow></vxe-table-column>
                            <vxe-table-column field="redo_result" title="复查前结果" header-align="center" align="right" width="100" show-overflow></vxe-table-column>
                            <vxe-table-column field="reportid" title="报告ID" width="120" sortable></vxe-table-column>
                            <vxe-table-column field="sampledate" title="样本日期" width="125" header-align="center" align="center" sortable></vxe-table-column>
                            <vxe-table-column field="rptunitname" title="报告单元" width="80" show-overflow></vxe-table-column>
                            <vxe-table-column field="sampleno" title="样本号" width="55" sortable></vxe-table-column>
                            <vxe-table-column field="multiitemid" title="判定记录ID" width="70" header-align="center" align="right" show-overflow></vxe-table-column>
                        </vxe-table>
                    </div>
                </template>
            </rm-layout-right>
            <div v-show="false">
                <vxe-table ref="exportTable" :data.sync="exportData">
                    <vxe-table-column field="rulename" title="违反的规则" header-align="center" width="125" sortable></vxe-table-column>
                    <vxe-table-column field="ruleclassname" title="规则类别" header-align="center" width="70" sortable></vxe-table-column>
                    <vxe-table-column field="hospitalname" title="医院" width="160" show-overflow :formatter="format"></vxe-table-column>
                    <vxe-table-column field="pat_no" title="病历号" width="75" sortable></vxe-table-column>
                    <vxe-table-column field="pat_cardno" title="病人卡号" width="80" show-overflow></vxe-table-column>
                    <vxe-table-column field="pat_name" title="姓名" width="60" show-overflow></vxe-table-column>
                    <vxe-table-column field="pat_sexname" title="性别" width="60" show-overflow :formatter="format"></vxe-table-column>
                    <vxe-table-column field="pat_agestr" title="年龄" width="60" show-overflow></vxe-table-column>
                    <vxe-table-column field="pat_idcardno" title="病人身份证号" width="140" show-overflow></vxe-table-column>
                    <vxe-table-column field="describe" title="规则提示说明" width="135" show-overflow></vxe-table-column>
                    <vxe-table-column field="deptname" title="科室" width="95" show-overflow></vxe-table-column>
                    <vxe-table-column field="wardname" title="病区" width="60" show-overflow></vxe-table-column>
                    <vxe-table-column field="create_user" title="上报人" width="60" header-align="center" align="center" show-overflow></vxe-table-column>
                    <vxe-table-column field="create_dt" title="上报时间" width="125" header-align="center" align="center" sortable></vxe-table-column>
                    <vxe-table-column field="create_note" title="上报备注" width="100" show-overflow></vxe-table-column>
                    <vxe-table-column field="isvalid" title="有效标志" width="60" show-overflow :formatter="format"></vxe-table-column>
                    <vxe-table-column field="hischeckman" title="临床确认人" width="80" header-align="center" align="center" show-overflow></vxe-table-column>
                    <vxe-table-column field="hischeckdt" title="临床确认时间" width="125" header-align="center" align="center" sortable></vxe-table-column>
                    <vxe-table-column field="hischeckinfo" title="临床确认备注" width="100" show-overflow></vxe-table-column>
                    <vxe-table-column field="reportid" title="报告ID" width="120" sortable></vxe-table-column>
                    <vxe-table-column field="rpt_itemcode" title="项目代码" width="80" show-overflow></vxe-table-column>
                    <vxe-table-column field="rpt_itemname" title="项目名称" width="120" show-overflow></vxe-table-column>
                    <vxe-table-column field="result_unit" title="项目单位" width="80" show-overflow></vxe-table-column>
                    <vxe-table-column field="result_str" title="文字结果" header-align="center" align="right" width="70" show-overflow></vxe-table-column>
                    <vxe-table-column field="result_num" title="数值结果" header-align="center" align="right" width="70" show-overflow></vxe-table-column>
                    <vxe-table-column field="redo_result" title="复查前结果" header-align="center" align="right" width="100" show-overflow></vxe-table-column>
                    <vxe-table-column field="sampledate" title="样本日期" width="125" header-align="center" align="center" sortable></vxe-table-column>
                    <vxe-table-column field="rptunitname" title="报告单元" width="80" show-overflow></vxe-table-column>
                    <vxe-table-column field="sampleno" title="样本号" width="55" sortable></vxe-table-column>
                </vxe-table>
            </div>
        </div>
    </div>
</template>


<script type="text/javascript">
import XE from "xe-utils"; //引入工具类
XE.mixin({
    // 自定义全局的格式化处理函数
    formatSelect(cellValue, list) {
        let item = list.find((item) => item.value == cellValue);
        return item ? item.label : "";
    },
});
export default {
    name: "LIS441",
    data() {
        return {
            main_Loading: false,
            mainData: [],
            detailData: [],
            exportData: [],
            ruleclassOption: [], // 类别
            sel_startdt: XE.toDateString(new Date(), "yyyy-MM-01"),
            sel_enddt: XE.toDateString(new Date(), "yyyy-MM-dd"),
            patno: "",
            patname: "",
            hospcode: "",
            shospcode: "",
            deptno: "",
            wardno: "",
            ruleclass: "",
            labgroupval: "",
            detail_Loading: false,
            mainheight: "auto",
            startkey: 0,
            endkey: 0,
            isSelect: false,
            //hospCode: "",
            // pickerOptions: {
            //     //添加跳转今天
            //     shortcuts: [
            //         {
            //             text: "今天",
            //             onClick(picker) {
            //                 picker.$emit("pick", new Date());
            //                 this.sel_startdt = new Date();
            //                 this.sel_enddt = new Date();
            //             },
            //         },
            //     ],
            // },
            hospname: "",
            shospname: "",
            deptname: "",
            wardname: "",
            labgroupname: "",
        };
    },
    created() {
        this.InitPage();
        //this.btnQuery();
    },

    methods: {
        InitPage() {
            this.$tool
                .request({
                    url: "LIS/LIS4/LIS441",
                    method: "post",
                    data: {
                        action: "InitPage",
                    },
                })
                .then((res) => {
                    this.ruleclassOption = res.ruleclasslist;
                    if (res.hospCode != "") {
                        this.isSelect = true;
                        this.hospcode = res.hospCode;
                    } else {
                        this.isSelect = false;
                    }
                })
                .catch((err) => {});
        },
        btnQuery() {
            this.main_Loading = true;
            this.$tool
                .request({
                    url: "LIS/LIS4/LIS441",
                    method: "post",
                    data: {
                        action: "QueryData",
                        startdt: this.sel_startdt,
                        enddt: this.sel_enddt,
                        hospcode: this.hospcode,
                        shospcode: this.shospcode,
                        patno: this.patno,
                        patname: this.patname,
                        deptno: this.deptno,
                        wardno: this.wardno,
                        ruleclass: this.ruleclass,
                        labgroupval: this.labgroupval,
                    },
                })
                .then((res) => {
                    this.mainData = res.data;
                    if (res.data != null && res.data.length > 0) {
                        this.$refs.mainTable.setCurrentRow(res.data[0]);
                        this.queryDetailData(res.data[0]);
                        this.main_Loading = false;
                    } else {
                        this.$refs.mainTable.setCurrentRow(null);
                        this.detailData = [];
                    }
                    this.main_Loading = false;
                })
                .catch((e) => {
                    this.$message.error(e);
                });
        },

        queryDetailData(row) {
            this.detail_Loading = true;
            this.$tool
                .request({
                    url: "LIS/LIS4/LIS441",
                    method: "post",
                    timeout: 600000,
                    data: {
                        action: "QueryDetail",
                        multiitemid: row.multiitemid,
                    },
                })
                .then((res) => {
                    if (res.data.length > 0) {
                        this.detailData = res.data;
                    } else {
                        this.detailData = [];
                    }
                    this.detail_Loading = false;
                });
        },

        mainchange_Event({ row, column }) {
            this.queryDetailData(row);
        },
        hospChange(code, name) {
            this.hospcode = code;
            this.hospname = name;
        },
        shospChange(code, name) {
            this.shospcode = code;
            this.shospname = name;
        },
        deptChange(code, name) {
            this.deptno = code;
            this.deptname = name;
        },
        wardChange(code, name) {
            this.wardno = code;
            this.wardname = name;
        },
        labgroupchange(code, name) {
            this.labgroupval = code;
            this.labgroupname = name;
        },
        btnExport() {
            let options = {
                filename: "LIS441 异常结果上报查询.csv",
            };
            this.$refs.mainTable.exportCsv(options);
        },
        btnDetailExport() {
            this.$tool
                .request({
                    url: "LIS/LIS4/LIS441",
                    method: "post",
                    timeout: 600000,
                    data: {
                        action: "QueryExportData",
                        startdt: this.sel_startdt,
                        enddt: this.sel_enddt,
                        hospcode: this.hospcode,
                        shospcode: this.shospcode,
                        patno: this.patno,
                        patname: this.patname,
                        deptno: this.deptno,
                        wardno: this.wardno,
                        ruleclass: this.ruleclass,
                        labgroupval: this.labgroupval,
                    },
                })
                .then((res) => {
                    if (res.data != null) this.exportData = res.data;

                    let extableColumn = [];

                    let tableColumn = this.$refs.exportTable.getColumns();
                    tableColumn.forEach((item) => {
                        extableColumn.push({ title: item.title, field: item.property });
                    });
                    let filtertxt = this.getExportFilter();
                    this.$pub.exportTableExcel(this.exportData, extableColumn, "LIS441 异常结果上报明细.xlsx", filtertxt);
                });
        },
        // 获取当前导出文件的所有查询条件
        getExportFilter() {
            let filtertxt = "上报日期:" + XE.toDateString(this.sel_startdt, "yyyy-MM-dd") + "至" + XE.toDateString(this.sel_enddt, "yyyy-MM-dd ") + "; ";
            if(this.hospcode) filtertxt += "医院/院区:" + this.hospname + "; ";
            if(this.patno) filtertxt += "病历号:" + this.patno + "; ";
            if(this.shospcode) filtertxt += "送检医院:" + this.shospname + "; ";
            if(this.patname) filtertxt += "姓名:" + this.patname + "; ";
            if(this.deptno) filtertxt += "科室:" + this.deptname + "; ";
            if(this.wardno) filtertxt += "病区:" + this.wardname + "; ";
            if(this.ruleclass) filtertxt += "规则类别:" + this.getOptionName(this.ruleclassOption.filter((item) =>  this.ruleclass == item.value)) + "; ";
            if(this.labgroupval) filtertxt += "检验组:" + this.labgroupname + "; ";
            return filtertxt;
        },
        getOptionName(option) {
            if (option && option.length > 0) {
                let optionname = "";
                option.forEach((item) => {
                    optionname += item.label + ",";
                });
                return optionname.substring(0, optionname.length - 1);
            } else {
                return "";
            }
        },
        btnClear() {
            this.main_Loading = false;
            this.sel_startdt = XE.toDateString(new Date(), "yyyy-MM-01");
            this.sel_enddt = XE.toDateString(new Date(), "yyyy-MM-dd");
            this.hospcode = "";
            this.shospcode = "";
            this.patno = "";
            this.patname = "";
            this.deptno = "";
            this.wardno = "";
            this.ruleclass = "";
            this.labgroupval = "";
            this.mainData = [];
            this.detailData = [];
        },

        Focus(event) {
            event.currentTarget.select();
        },
        format({ cellValue, row, column }) {
            if (column.property == "isvalid") {
                if (row.isvalid == "1") {
                    return "有效";
                } else if (row.isvalid == "0") {
                    return "无效，解除审核等";
                } else {
                    return "取消上报";
                }
            } else if (column.property == "hospitalname") {
                if (row.hospitalname == "" || row.hospitalname == null) {
                    return "所有医院";
                } else {
                    return row.hospitalname;
                }
            } else if (column.property == "shospitalname") {
                if (row.shospitalname == "" || row.shospitalname == null) {
                    return "所有医院";
                } else {
                    return row.shospitalname;
                }
            } else if (column.property == "pat_sex") {
                if (row.pat_sex == "1") {
                    return "男";
                } else if (row.pat_sex == "2") {
                    return "女";
                } else {
                    return row.pat_sex;
                }
            }
        },
    },
};
</script>

<style scoped>
::v-deep .el-checkbox__inner::after {
    border: 2px solid #000000 !important;
    box-sizing: content-box;
    content: "";
    border-left: 0 !important;
    border-top: 0 !important;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform 0.15s ease-in 0.05s;
    transform-origin: center;
}
::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
    color: #000000;
    cursor: not-allowed;
}
::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner,
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner + .el-input.is-disabled .el-input__inner {
    background-color: #ffffff !important;
}
::v-deep .el-input--suffix .el-input__inner {
    padding-right: 5px;
}
.middle-tab-bottom {
    position: absolute;
    top: 0px;
    width: 100%;
    bottom: 0px;
    overflow: auto;
}
.pagetop {
    left: 0;
    right: 0;
    height: 100px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    border: solid 1px #ccc;
    position: absolute;
    z-index: 99;
}
.pagecenter {
    position: absolute;
    top: 105px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}
.pagebottom {
    position: absolute;
    width: 100%;
    left: 0;
    margin-top: 4px;
    height: 36px;
    bottom: 0px;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    border: solid 1px #ccc;
}

.right-inser {
    position: absolute;
    top: 0;
    bottom: 0px;
    overflow: auto;
    width: 100%;
    right: 0px;
}

table tr td:nth-child(odd) {
    text-align: right;
    white-space: nowrap;
}
table tr td:nth-child(even) {
    text-align: left;
}
table tr td:nth-child(1) {
    width: 80px;
}
table {
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 5px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader-icon1 {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.avatar1 {
    width: 178px;
    height: 50px;
    display: block;
}
.middle-tab-top {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 200px;
}
.middle-bottom {
    position: absolute;
    top: 37px;
    width: 100%;
    bottom: 0px;
    overflow: auto;
}
.middle-tab-bottom {
    position: absolute;
    top: 203px;
    width: 100%;
    bottom: 0px;
    overflow: auto;
}
.poppagetop {
    width: 100%;
    height: 24px;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    position: absolute;
    /* border: 1px solid #ccc; */
    z-index: 999;
}
.poppagecenter {
    position: absolute;
    overflow: auto;
    top: 27px;
    width: 100%;
    height: 450px;
    left: 0;
}
::v-deep .el-select-dropdown__wrap {
    max-width: 400px;
}
::v-deep .vxe-table .vxe-body--row.row--hover td {
    background-color: #d7f1fd;
    vertical-align: top !important;
}
::v-deep .vxe-table.size--mini .vxe-body--column,
.vxe-table.size--mini .vxe-footer--column,
.vxe-table.size--mini .vxe-header--column {
    padding: 1px 0;
    vertical-align: top !important;
}
::v-deep .vxe-table .vxe-sort-wrapper {
    padding: 0 0px;
}
::v-deep .colred {
    background-color: red !important;
}
::v-deep .colgreen {
    background-color: #00ff00 !important;
}
::v-deep .colrow {
    background-color: #c0ffc0;
}
::v-deep .el-input.is-disabled .el-input__inner {
    color: #606266;
    cursor: default;
}
::v-deep .vxe-table .vxe-body--column.col-blue {
    color: blue;
}
::v-deep .vxe-table .vxe-body--column.col-red {
    color: red;
}
</style>